<template>
  <van-popup v-model="isShow"
             :closeable='false'
             position="right"
             :style="{ height: '100%',width:'80%' }"
             @close="onClose"
             ref="pop">
    <div class="box">
      <div class="content">
        <div class="title">户型</div>
        <div class="btnGroup">
          <van-button v-for="item in btnGroup.roomType"
                      :key="item.label"
                      @click="btnToggle(item.value)"
                      :class="{'active':moreQuery.includes(item.value)}">{{item.label}}</van-button>
          <hr>
        </div>
        <div class="title">朝向</div>
        <div class="btnGroup">
          <van-button v-for="item in btnGroup.oriented"
                      :key="item.label"
                      @click="btnToggle(item.value)"
                      :class="{'active':moreQuery.includes(item.value)}">{{item.label}}</van-button>
          <hr>
        </div>
        <div class="title">楼层</div>
        <div class="btnGroup">
          <van-button v-for="item in btnGroup.floor"
                      :key="item.label"
                      @click="btnToggle(item.value)"
                      :class="{'active':moreQuery.includes(item.value)}">{{item.label}}</van-button>
          <hr>
        </div>
        <div class="title">房屋亮点</div>
        <div class="btnGroup">
          <van-button v-for="item in btnGroup.characteristic"
                      :key="item.label"
                      @click="btnToggle(item.value)"
                      :class="{'active':moreQuery.includes(item.value)}">{{item.label}}</van-button>
        </div>
      </div>
      <div class="footer">
        <van-button class="btnCancel" @click="btnCancel">
          清除
        </van-button>
        <van-button type="primary"
                    class="btnOk"
                    @click="btnOk">
          确定
        </van-button>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: 'Popup',
  data () {
    return {
      isShow: false,
      btnGroup: {
        // 房间户型
        roomType: [],
        // 朝向
        oriented: [],
        // 楼层
        floor: [],
        // 房屋亮点
        characteristic: []
      },
      // 复合查询参数
      moreQuery: [],
      // 当前参数
      currentQuery: []
    }
  },
  methods: {
    // 当前组件关闭
    onClose () {
      // 还原当前参数
      this.moreQuery = [...this.currentQuery]
      this.$emit('closePopup')
    },
    // 按钮切换事件
    btnToggle (val) {
      const index = this.moreQuery.indexOf(val)
      if (index >= 0) {
        // 已经选择过,取消选择
        this.moreQuery.splice(index, 1)
      } else {
        // 没有选择,添加选择
        this.moreQuery.push(val)
      }
    },
    // 确定按钮事件
    btnOk () {
      // 设置当前参数为选中的参数
      this.currentQuery = [...this.moreQuery]
      this.$emit('updateData', this.currentQuery)
      // 关闭窗口
      this.$refs.pop.close()
    },
    // 清除按钮事件
    btnCancel () {
      this.moreQuery = []
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/.box{
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction:column;
    .content{
      flex: 1;
      overflow: auto;
      padding: 25px;
      .title{
      margin: 30px 0;
      font-size: 24px;
    }
    .btnGroup{
      width: 380px;
      margin: 0 auto;
      .van-button{
        width: 160px;
        padding: 0;
        margin: 15px;
        &.active{
          border-color: #21b97a;
          font-size: #21b97a;
          background-color: #defaef;
        }
      }
      hr{
        background-color: #e5e5e5;
        height: 1px;
        border: none;
      }
    }
  }
  .footer{
    height: 80px;
    background-color: pink;
    display: flex;
    .btnCancel{
      color: #07c160;
      width: 220px;
      font-size: 35px;
    }
    .btnOk{
      flex: 1;
      font-size: 35px;
    }
  }
}

</style>
